<ng-container [ngSwitch]="field.controlType" [formGroup]="form">
  <ng-container *ngSwitchCase="'hidden'">
    <input type="hidden" [formControlName]="field.key">
  </ng-container>

  <ng-container *ngSwitchCase="'group'">
    <ng-container [formGroupName]="field.key">
      <ng-container *ngFor="let sf of field['fields']">
        <app-field [form]="form.get(field.key)" [field]="sf"></app-field>
      </ng-container>
    </ng-container>
  </ng-container>

  <ng-container *ngSwitchDefault>
    <div nz-col [nzSpan]="12">
      <nz-form-item *ngIf="field.key==='shopID'?isPayNearby:true" >
        <nz-form-label [attr.for]="field.key"   >{{field.label}}</nz-form-label>
        <nz-form-control nzHasFeedback="true">

          <ng-container [ngSwitch]="field.controlType" >
            <ng-container *ngSwitchCase="'textbox'" >
              <input
                [formControlName]="field.key"
                nz-input />
            </ng-container>

            <ng-container *ngSwitchCase="'number'">
              <nz-input-number
                style="width:100%;"
                [formControlName]="field.key"
                [nzMin]="0"
                [nzMax]="10"
                [nzStep]="0.1"
                [nzPrecision]="4"
                [nzFormatter]="formatterPercent"
                [nzParser]="parserPercent"></nz-input-number>
            </ng-container>

            <ng-container *ngSwitchCase="'select'">
              <nz-select
                style="width:100%;"
                [formControlName]="field.key"
                [compareWith]="field['compareWith']"
                (ngModelChange)="onModelChange($event)"
                nzAllowClear>
                <nz-option
                  *ngFor="let option of field['options']"
                  [nzValue]="option"
                  [nzLabel]="option"></nz-option>
              </nz-select>
            </ng-container>

            <ng-container *ngSwitchCase="'chan-mer-select'">
              <nz-select
                style="width:100%;"
                [formControlName]="field.key"
                [compareWith]="field['compareWith']"
                (ngModelChange)="onModelChange($event)"
                nzAllowClear>
                <nz-option
                  *ngFor="let option of field['options']"
                  [nzValue]="option"
                  [nzLabel]="option[field['labelKeyOfOption']]"></nz-option>
              </nz-select>
            </ng-container>

            <ng-container *ngSwitchCase="'mcc'">
              <app-mcc-select
                [formControlName]="field.key"
                [mccType]="field['mccType']"></app-mcc-select>
            </ng-container>

            <ng-container *ngSwitchCase="'checkbox'">
              <nz-switch [formControlName]="field.key" (ngModelChange)="onModelChange($event)" ></nz-switch>
            </ng-container>

            <ng-container *ngSwitchDefault>
              不支持的type
            </ng-container>
          </ng-container>

          <nz-form-explain
            *ngIf="isInvalid">
            <ng-container
              *ngTemplateOutlet="errorTpl;context:{control:form.get(field.key), name:field.key}">
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
  </ng-container>
</ng-container>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ field.validatorErrors?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ field.validatorErrors?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ field.validatorErrors?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('pattern')">{{ field.validatorErrors?.pattern }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>
